@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

:root {
    --main-bg-color: linear-gradient(60deg, rgb(234, 151, 7) 0%, rgb(233, 48, 6) 100%);
}

.imagen-fondo{
    background-image: url(../img/fondo-video.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 330px;
    width: 100%;
}

.video{
    display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}

.btn{
	position: relative;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 15px;
	padding-top: 100px;
}

.btn .play{
	position: relative;
	width: 80px;
	height: 80px;
	background: #FFA500;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.1s;
}

.btn.active  .play{
	box-shadow: 0 0 0 150vh #FF8C00;
}

.btn .play::before{
	content:'';
	position: absolute;
	border: 25px solid #fff;
	border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 0px solid transparent;
    transform: translateX(5px);
}

.btn p{
	font-weight: 500;
	font-size: 1em;
	color: #888;
	letter-spacing: 4px;
	text-transform: uppercase;
}

.clip{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) scale(0);
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	transition: 0.5s;
}

.clip.active{
  transition-delay: 0.5s;
  transform: translate(-50%,-50%) scale(1);
}

.clip video{
  max-width: 900px;
  outline: none;
  border: 10px solid #fff;
  box-shadow: 0 15px 35px rgb(0, 0, 0, 0.25);
}

.clip .close{
	position: absolute;
	top: 30px;
	right: 30px;
	cursor: pointer;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: black;
}


@media(max-width: 991px)
{
	.clip video{
      max-width: 90%;
	}
}